import depart from '@/common/getDepartment';
import formatter from '@/common/formatter';
import { getScatterSerie } from '@/components/options/ZongTi/getScatterSerie';

const base = {
		title: '投诉产能情况',
		xName: '投诉在途归档比',
		yName: '投诉人均产能',
	},
	dataset = [
		{ name: '茂南', data: [9.0, 8.04] },
		{ name: '电白', data: [5.02, 5.68] },
		{ name: '高州', data: [3.02, 2.68] },
		{ name: '化州', data: [4, 3] },
		{ name: '信宜', data: [6, 4] },
	];

function getChartData(
	[dataPool1, dataPool2],
	condition,
	mergeDepartment = ['全市']
) {
	let _condition = condition ? [...condition[0], ...condition[1]] : undefined;
	_condition =
		_condition && _condition.length
			? _condition
			: ['茂南', '电白', '高州', '化州', '信宜'];
	const rjcn = dataPool2['tousu_renjunchanneng'].sort(
			(a, b) => a['日期'] - b['日期']
		),
		ztgdb = dataPool2['tousu_zaituguidangbi'].sort(
			(a, b) => a['日期'] - b['日期']
		);

	const data = ztgdb.map((row, index) => {
		const date = row['日期'];
		const departs = Object.keys(row).filter(
			(i) => i !== '日期' && _condition.includes(i)
		);
		return departs.map((depart) => {
			return [row[depart], rjcn[index][depart], depart, date];
		});
	});

	const timelineData = data.map((i) => i[0][3]);
	this.baseOption.timeline.data = timelineData;
	this.baseOption.timeline.currentIndex = timelineData.length - 1;

	const markLine = { xAxis: 1, yAxis: 1 };
	this.options = data.map((d, index) => {
		return {
			series: getScatterSerie(d, markLine),
			title: {
				show: true,
				text:
					'投诉产能情况(' +
					formatter.excelDate(timelineData[index]) +
					')',
			},
		};
	});

	const xMaxValue = Math.max(
		markLine.xAxis + markLine.xAxis * 0.2,
		Math.max(
			...data.map((subArray) => Math.max(...subArray.map((item) => item[0])))
		) + 1
	);
	const yMaxValue = Math.max(
		markLine.yAxis + markLine.yAxis * 0.2,
		Math.max(
			...data.map((subArray) => Math.max(...subArray.map((item) => item[1])))
		) + 1
	);
	this.baseOption.xAxis.max = xMaxValue;
	this.baseOption.yAxis.max = yMaxValue;
}
// ======更新内容↑========

const graphicLeft = window.isMobile ? '14%' : '10%',
	graphic = {
		elements: [
			{
				type: 'text',
				left: graphicLeft,
				top: '18%',
				style: {
					text: '在途归档比低',
				},
			},
			{
				type: 'text',
				left: graphicLeft,
				top: '21%',
				style: {
					text: '但人均产能高',
				},
			},
			{
				type: 'text',
				left: graphicLeft,
				top: '24%',
				style: {
					text: '相对健康',
				},
			},
			{
				type: 'text',
				left: graphicLeft,
				bottom: '26%',
				style: {
					text: '在途归档比和',
				},
			},
			{
				type: 'text',
				left: graphicLeft,
				bottom: '23%',
				style: {
					text: '人均产能同低',
				},
			},
			{
				type: 'text',
				left: graphicLeft,
				bottom: '20%',
				style: {
					text: '相对健康',
				},
			},
			{
				type: 'text',
				right: '8%',
				top: '18%',
				style: {
					text: '在途归档比和',
				},
			},
			{
				type: 'text',
				right: '8%',
				top: '21%',
				style: {
					text: '人均产能同高',
				},
			},
			{
				type: 'text',
				right: '8%',
				top: '24%',
				style: {
					text: '请关注工单积压',
				},
			},
			{
				type: 'text',
				right: '8%',
				bottom: '26%',
				style: {
					text: '在途归档比高',
				},
			},
			{
				type: 'text',
				right: '8%',
				bottom: '23%',
				style: {
					text: '但人均产能低',
				},
			},
			{
				type: 'text',
				right: '8%',
				bottom: '20%',
				style: {
					text: '请关注提升产能',
				},
			},
		],
	};

export default {
	baseOption: {
		backgroundColor: '#fff',
		timeline: {
			axisType: 'category',
			autoPlay: false,
			playInterval: 1000,
			symbol: 'none',
			checkpointStyle: {
				borderWidth: 2,
			},
			controlStyle: {
				showNextBtn: false,
				showPrevBtn: false,
			},
			data: [],
			label: {
				rotate: 20,
				formatter: (params) => formatter.excelDate(params, 'M/D'),
			},
			left: '8%',
			right: '8%',
			bottom: 0,
		},
		title: {
			text: base.title,
			left: 'center',
		},
		xAxis: {
			type: 'value',
			name: base.xName,
			nameGap: 25,
			nameLocation: 'center',
			axisLabel: {
				formatter: (value) => formatter.valueToText(value),
			},
		},
		yAxis: {
			type: 'value',
			name: base.yName,
			nameGap: 25,
			nameLocation: 'center',
			nameRotate: 90,
			axisLabel: {
				formatter: (value) => formatter.valueToText(value),
			},
		},
		legend: {
			type: 'scroll',
			top: 30,
		},
		tooltip: {
			formatter: (params) => {
				let tip = `<div class="space-y-1"><div class='font-bold'>${
					params.marker + params.seriesName
				}（${formatter.excelDate(params.value[3])}）</div>`;
				const content = [
					{ name: base.xName, value: formatter.valueToText(params.value[0]) },
					{ name: base.yName, value: formatter.valueToText(params.value[1]) },
				];
				content.forEach((item, index) => {
					tip += `<div class='flex justify-between space-x-6 p-0'>
          <span>${item.name}</span>
          <span class="font-bold">${item.value}</span>
          </div>`;
				});
				tip += '</div>';
				return tip;
			},
		},
		// series,
		grid: {
			width: '90%',
			height: '74%',
			left: '4%',
			right: '2%',
			top: '14%',
			bottom: '12%',
			containLabel: true,
		},
		graphic,
		animationDurationUpdate: 1000,
		animationEasingUpdate: 'quinticInOut',
	},
	options: [],
	getChartData,
};
